<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+44+'px'}"></view>
			<u-navbar @leftClick="$nav(2)" title="确认订单">
			</u-navbar>
		</view>
		
		
		<view class="dis_felx" @click="pop_show">
			<u-icon name="map" color="#767676" style="margin-left: 15rpx;"></u-icon>
			<view class="felx_2">
				<view class="address_name">
					<text>{{add_default.consignee_name ? add_default.consignee_name: '请选择收货地址'}}</text>
					<text>{{add_default.consignee_mobile}}</text>
				</view>
				<view>{{add_default.area_path ? add_default.area_path : ''}}{{add_default.detail_address ? add_default.detail_address : ''}}</view>
			</view>
			<view class="felx_3">
				<u-icon name="arrow-right" color="#848484"></u-icon>
			</view>
		</view>
		
		
		
		<view style="margin-bottom: 160rpx;">
			
		
		<view v-for="(item,index) in list" :key="index">
			
			<view class="shop-item">
				
				<view class="shop-name">
					<image class="icon-shop" :src="shopImage" mode="widthFix"></image>
					<view style="font-size: 25rpx;font-weight: bold;">
						{{item.shop_title}}
					</view>
				</view>
				
				
				
				<view v-for="(gItem,gIndex) in item.cartList" :key="gIndex">
				     <view class="commodity_cont">
					
						<image :src="gItem.pic_thumb"></image>
						<view>
							<view class="commodity_tit">
								{{gItem.sku_name}}
							</view>
							<view class="commodity_sel">已选：<text style="padding-right: 10rpx;">{{gItem.sku_data}}</text></view>
							<view class="commodity_price">
								<text>¥{{gItem.new_price}}</text>
								<text>x{{gItem.quantity}}</text>
							</view>
						</view>
					</view>
					<view class="flex-row justify-between items-center" style="padding-left: 20rpx;padding-right: 20rpx;">
						<text style="font-size: 28rpx;">运费</text>
						<text style="font-size: 27rpx;">¥{{gItem.fixed_shipping_fee}}</text>
					</view>
					<!-- <view class="remark">
						<text>备注</text>
						<u-input v-model="remark" placeholder="商品备注" border="false"/>
					</view> -->
					<view class="goods-b-a">
						<text>共{{gItem.quantity}}件</text>
						<text style="margin-left: 12rpx;">小计：</text>
						<text style="color: #d6000f;">¥{{xjPrice(gItem)}}</text>
					</view>
					<view class="line"></view>
				</view>
				
			</view>
			
			
		</view>
		</view>
		
		<view class="bottom-lay">
			<view class="flex-row justify-between items-center">
				<view class="flex-row" style="width: 30vw; margin-left: 20rpx;word-wrap: break-word;">
					<text>总额：</text>
					<text style="font-size: 35rpx;color: #d6000f;">¥{{allPrice()}}</text>
				</view>
				<view class="bottom-btn" @click="toPay()">
					立即支付
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopImage: '/static/cart/store_img.png', // 店铺图标
				list:[],
				add_default: {},
				remark:'',
				idList:[]
			};
		},
		onLoad(op) {
			this.idList = JSON.parse(op.pack);
			// console.log(this.idList)
			this.getCartCheckOrder();
			this.getDefaultAddress();
		},
		onShow() {
			let that = this
			uni.$once('isRefresh',function(data){
				
				that.add_default = data;
				
				console.log("新："+that.add_default);
				
			})
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight
			}
		},
		methods:{
			allPrice(){
				let price = 0;
				this.list.forEach(item =>{
					item.cartList.forEach(gItem =>{
						price += (Number(gItem.new_price) * Number(gItem.quantity)) + Number(gItem.fixed_shipping_fee)
					})
				});
				return price.toFixed(2);
			},
			
			toPay(){
				if(!this.add_default){
					this.$u.toast('请添加收货地址');
					return;
				}
				
				let selectList = [];
				this.list.forEach(item =>{
					item.cartList.forEach(gItem =>{
						let pack = {};
						pack.cart_id = gItem.cart_id
						pack.sku_id = gItem.sku_id
						pack.order_number = gItem.quantity
						selectList.push(pack)
					})
				});
				
				uni.showLoading({
					title:'加载中'
				});
				// console.log(selectList)
				this.$request({
					url:'?c=Order&a=createGeneralOrder',
					type:'post',
					data:{
						address_id:this.add_default.id,
						skuInfo:JSON.stringify(selectList)
					}
				}).then(res =>{
					uni.hideLoading();
				
					// console.log(res)
					this.$store.commit('setCartUpdate',true);
					let data = res.data;
					uni.navigateTo({
						url:'/pages/order_allocation/cart_order_pay?pack='+ encodeURIComponent(JSON.stringify(data))
					})
				})
			},
			
			
			///小计
			xjPrice(item){
				return ((Number(item.new_price) * Number(item.quantity)) + Number(item.fixed_shipping_fee)).toFixed(2)
			},
			getCartCheckOrder(){
				this.$request({
					url:'?c=Cart&a=cartCheckout',
					type:'post',
					data:{
						cart_ids:this.idList.join(',')
					}
				}).then(res =>{
					this.list = res.data;
				});
			},
			pop_show(){
				uni.navigateTo({
					url:'/pages/mine/address/address'
				})
			},
			getDefaultAddress(){
				this.$request({
					url:'?c=User&a=defaultAddress',
					type:'post'
				}).then(res =>{
					this.add_default = res.data;
				})
			},
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
}
.shop-item{
	background-color: #fff;
	border-radius: 10rpx;
	padding: 25rpx;
	margin: 10rpx;
	display: flex;
	flex-direction: column;
}
.dis_felx {
	align-items: center;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 35rpx;
}
.felx_2 {
	line-height: 40rpx;
	width: 70%;
	font-size: 26rpx;
	font-weight: 400;
}
.address_name>text:first-child {
	font-size: 28rpx;
}

.address_name>text:last-child {
	padding-left: 20rpx;
	color: #000;
}
.shop-name{
	display: flex;
	align-items: center;
}
.icon-shop {
	width: 42rpx;
	margin-right: 20rpx;
}
 .commodity_cont {
 	display: flex;
 	justify-content: space-between;
 	// margin: 20rpx 0;
 	margin-top: 15rpx;
 	background-color: #fff;
 	padding: 20rpx;
 	image {
 		width: 170rpx;
 		height: 170rpx;
 
 		border-radius: 20rpx;
 	}
 
 	>view {
 		width: calc(100% - 190rpx);
 
 	}
 }
 .commodity_tit {
 	color: black;
 	font-weight: 400;
 	width: 100%;
 	overflow: hidden; //超出文本隐藏
 
 	text-overflow: ellipsis; ///超出部分省略号显示
 
 	display: -webkit-box; //弹性盒模型
 
 	-webkit-box-orient: vertical; //上下垂直
 
 	-webkit-line-clamp: 2; //自定义行数
 }
 .commodity_sel {
 	color: #939393;
 	padding: 10rpx 0;
 }
 .commodity_price {
 	display: flex;
 	justify-content: space-between;
 
 	>text:first-child {
 		font-weight: bold;
 		color: #d6000f;
 	}
 
 	>text:last-child {
 
 		color: #676767;
 	}
 }
 .goods-b-a{
	 display: flex;
	 flex-direction: row;
	 justify-content: flex-end;
	 align-items: center;
	 padding-right: 20rpx;
	 padding-top: 10rpx;
	 font-size: 28rpx;
 }
 .bottom-lay{
 	position: fixed;
 	left: 0;
 	bottom: 0;
 	height: 150rpx;
 	line-height: 90rpx;
 	width: 100%;
 	text-align: center;
 	background-color: #fff;
 }
 .bottom-btn{
 	border-radius: 45rpx;
 	background-color: #5c8edc;
 	padding: 10rpx 40rpx;
 	height: 78rpx;
 	// margin-right: 30rpx;
 	color: #fff;
 	display: flex;
	width: 50vw;
 	justify-content: center;
 	align-items: center;
 	margin: 20rpx 20rpx;
 }
 .remark {
 	padding: 20rpx;
 	display: flex;
 	// margin-top: 15rpx;
 	background-color: #fff;
 	font-size: 28rpx;
 	align-items: center;
 
 	>text:first-child {
 		font-weight: 400;
 		color: black;
 		margin-right: 40rpx;
 	}
 }
 .line{
 	border: 1px solid #f5f5f5;
 	margin-top: 25rpx;
 }
</style>
